
import React from 'react'
import { Table, Popconfirm, ConfigProvider, Button } from 'antd';

import { InfoCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/lib/locale/zh_CN';
import style from './othercompon.module.css'



export default function TableMents() {
  const columns = [{

    title: '客户名称',
    dataIndex: 'kehuName',
    align: 'center'
  }, {

    title: '模块',
    dataIndex: 'moKuai',
    align: 'center'
  }, {

    title: '行为',
    dataIndex: 'xingWei',
    render: (txt) => {
      console.log()
      if (txt[0].xing_id === 1) {
        return (<span style={{ color: 'cornflowerblue' }}>{txt[0].xiang_name1}</span>)
      }
      if (txt[0].xing_id === 2) {
        return (<span style={{ color: 'pink' }}>{txt[0].xiang_name2}</span>)
      }
      if (txt[0].xing_id === 3) {
        return (<span style={{ color: '#359296' }}>{txt[0].xiang_name3}</span>)
      }
    },
    align: 'center'
  }, {

    title: '原因',
    dataIndex: 'yuanYing',
    align: 'center',
    width: 200
  }, {

    title: '操作时间',
    dataIndex: 'chaozuoTime',
    align: 'center'
  }, {

    title: '操作员',
    dataIndex: 'chaoZuo',
    align: 'center'
  }, {

    title: '操作',
    dataIndex: '',
    render: (txt) => {
      return (
        <ConfigProvider locale={zhCN}>
          <Popconfirm
            title="确定要删除？"
            icon={<InfoCircleOutlined />}
            onConfirm={(e) => {
              console.log('点击了确认')
            }}
            onCancel={(e) => {
              console.log('点击了取消')
              // 此处调用api接口
            }}
          >
            <span style={{ color: 'red', fontSize: '13px' }}>删除</span>
          </Popconfirm>
        </ConfigProvider>
      )
    }
  }
  ]
  const dataSource = [{
    key: '1',
    kehuName: '小明',
    moKuai: '公海列表',
    xingWei: [
      {
        xing_id: 1,
        xiang_name1: '修改'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '2',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 1,
        xiang_name1: '修改'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '3',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 2,
        xiang_name2: '新增'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '4',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 1,
        xiang_name1: '修改'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '5',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 2,
        xiang_name2: '新增'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '6',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 3,
        xiang_name3: '申请'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '7',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 1,
        xiang_name1: '修改'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'


  }, {
    key: '8',
    kehuName: '小明',
    moKuai: '客户列表',
    xingWei: [
      {
        xing_id: 2,
        xiang_name2: '新增'
      }],
    yuanYing: 'aaaaa',
    chaozuoTime: '2022/03/31 11:04:33',
    chaoZuo: '超级管理员'
  },
  ]
  return (
    <div className={style.tableItem}>
      <ConfigProvider locale={zhCN}>
        <Table columns={columns} bordered dataSource={dataSource}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            total: dataSource.length,
            defaultPageSize: 5,
            defaultCurrent: 1,
            pageSizeOptions: ['5', '10', '15'],
            showTitle: (count = dataSource.length) => {
              return '共' + dataSource.length + '条'
            },
          }}
        />
      </ConfigProvider>
      <div className={style.pagingBox}>
        <Button type='primary'>清除数据</Button>
      </div>
    </div>
  )
}

